<template>
	<view class="advice-content">
		<view class="text-block">
			<view class="title">填写意见建议</view>
			<view class="describe">温馨提示：请您对自己的言论负责，严格遵守中华人民共和国各项法律和规定，不得发表含有造谣、诽谤及反动内容的言论，如有违反，我们将根据情况追究留言者的责任。</view>
		</view>
		<view class="form-block">
			<view class="form-item">
				<view class="form-label"><text class="require">*</text>手机号</view>
				<input placeholder-class="inputPlaceholder" placeholder="请输入您的手机号" v-model="form.mobile"
					disabled="disabled" />
			</view>
			<view class="form-item">
				<view class="form-label"><text class="require">*</text>标题</view>
				<input placeholder-class="inputPlaceholder" placeholder="请输入标题" maxlength="50" v-model="form.title" />
			</view>
			<view class="form-item">
				<view class="form-label"><text class="require">*</text>意见建议</view>
				<textarea placeholder-class="inputPlaceholder" placeholder="请输入意见建议内容" maxlength="200"
					v-model="form.content"></textarea>
			</view>
			<view class="btn normal" @click="submit">确认提交</view>
		</view>
	</view>
</template>

<script>
	import {
		getStorage
	} from '@/util/auth'
	import {
		validate
	} from '@/util/validate.js'
	import {
		submitAdvice
	} from '@/api/advice.js'
	export default {
		data() {
			return {
				form: {
					mobile: '',
					content: '',
					title: '',
					openid: ''
				},
				rules: {
					content: {
						name: '意见建议',
						required: true
					},
					mobile: {
						name: '手机号码',
						required: true,
					},
					title: {
						name: '标题',
						required: true,
					},
				}
			}
		},
		methods: {
			submit() {
				uni.showLoading({
					title: '提交中',
					mask: true
				});
				let form = JSON.parse(JSON.stringify(this.form));
				if (validate(form, this.rules)) {
					submitAdvice({
						title: this.form.title,
						content: this.form.content,
						//openid: this.form.openid
					}).then((res) => {
						uni.showToast({
							title: '提交成功',
							icon: 'success',
							duration: 1000,
							mask: true,
							success: function() {
								setTimeout(function() {
									uni.redirectTo({
										url: '/pages/my-idea/my-idea'
									})
								}, 1000)
							},
						})
					}).catch((res) => {
						uni.hideLoading()
						this.showToast('提交失败');
					})
				}
			},
		},
		onShow() {
			const loginInfo = getStorage('login');
			this.form.mobile = loginInfo.mobile;
			this.form.openid = loginInfo.openid;
		}
	}
</script>

<style lang="scss">
	page {
		height: 100vh;
		background: #f8f8f8;
	}

	.advice-content {
		width: 100%;

		.text-block {
			display: flex;
			flex-direction: column;
			background: #fff;
			padding: 30rpx;

			.title {
				font-weight: bold;
				font-size: 34rpx;
			}

			.describe {
				margin-top: 16rpx;
				font-size: 28rpx;
				color: #999;
				text-align: justify;
			}
		}

		.form-block {
			margin-top: 20rpx;
			display: flex;
			flex-direction: column;
			background: #fff;
			padding: 30rpx;

			.form-item {
				display: flex;
				flex-direction: column;
				border-bottom: 1px solid #efefef;
				margin-bottom: 20rpx;

				.form-label {
					font-weight: bold;
					font-size: 30rpx;
				}

				input,
				textarea,
				radio {
					margin: 20rpx 0;
				}

				input,
				textarea {
					font-size: 28rpx;
				}

				radio {
					transform: scale(0.7);
				}
			}

			.btn {
				width: calc(100% - 180rpx);
				margin: 30rpx auto;
			}
		}
	}
</style>